import { EChartsOption } from 'echarts'

import { PREDEFINE_COLORS, ECHARTS_COLORS, ECHARTS_COLORS2 } from '@/utils/color'

const { t } = useI18n()

export const pieOptions: EChartsOption = {
  title: {
    text: '',
    show: false,
    left: 'left',
    top: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    bottom: '0',
    icon: 'circle',
    itemWidth: 8,
    textStyle: {
      fontSize: 14,
      lineHeight: 14,
      rich: {
          a: {
             verticalAlign: 'middle',
          },
      },
      padding:[0,0,-2,0],  //[上、右、下、左]
    }
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['30%', '60%'],
      center: ['50%', '50%'],
      label: {
        position: 'outside',
        // "offset": 30,
        formatter: '{d}%',
        fontSize: 14
      },
      data: [],
      labelLine: {
        length: 10,
        length2: 20,
        smooth: 0.2
      }
    }
  ]
}

export const pie3DOptions: EChartsOption = {
  legend: {
    top: '0',
    right: '0',
    icon: 'circle',
    itemWidth: 8,
    textStyle: {
      fontSize: 14,
      lineHeight: 14,
      rich: {
          a: {
             verticalAlign: 'middle',
          },
      },
      padding:[0,0,-2,0],  //[上、右、下、左]
    }
  },
  title: {
    text: '数据集领域',
    left: 'left',
  },
  tooltip: {
    trigger: 'item'
  },
  visualMap: {
    show: false,
    min: 500,
    max: 600,
    inRange: {
    }
},
xAxis3D: {
  min: -1,
  max: 1,
},
yAxis3D: {
  min: -1,
  max: 1,
},
zAxis3D: {
  min: -1,
  max: 1,
},
grid3D: {
  show: false, //是否显示三维笛卡尔坐标系。
  boxHeight: 20, //三维笛卡尔坐标系在三维场景中的高度
  top: "-10%",
  // environment: "#000", //背景
  viewControl: {
    alpha: 30, //角度
    distance: 300, //调整视角到主体的距离，类似调整zoom 重要
    // rotateSensitivity: 0, //设置为0无法旋转
    zoomSensitivity: 0, //设置为0无法缩放
    panSensitivity: 0, //设置为0无法平移
    autoRotate: false, //自动旋转
  },
},
series: [{
    name: '',
    type: 'pie',
    radius: '65%',
    center: ['50%', '55%'],
    data: [],
    roseType: 'radius',
    label: {
      show: false,
      formatter: ['{c|{c}次}', '{b|{b}}'].join('\n'),
      rich: {
          c: {
              color: 'rgb(241,246,104)',
              fontSize: 20,
              fontWeight:'bold',
              lineHeight: 5
          },
          b: {
              color: 'rgb(98,137,169)',
              fontSize: 15,
              height: 40
          },
      }
    },
    labelLine: {
      show: false,
      lineStyle: {
        color: 'rgb(98,137,169)',
      },
      smooth: 0.2,
      length: 10,
      length2: 20,
    },
    itemStyle: {
      shadowColor: 'rgba(0, 0, 0, 0)',
      shadowBlur: 50,
    }
}]
}

export const bar1Options: EChartsOption = {
  title: {
    text: '数据集任务项',
    left: 'center',
    top: 'bottom'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: 60,
    right: 40,
    bottom: 60
  },
  axisTick: {
    alignWithLabel: true
  },
  dataZoom: [{ // 初始不显示dataZoom
    id: 'dataZoomX',  
    show: false,
    type: 'slider',
    orient: 'horizontal',
    showDetail: false,
    start: 0,
    // end: 100 - (100 / xdata.length) * dataZoomNum,
    end: 100,
    width: '100%',
    height: 10,
    left: 0
  }],
  color: ['#009D85'],
  xAxis: {
    type: 'category',
    data: [],
    axisTick: {
      alignWithLabel: true
    },
    axisLine: {
      lineStyle: {
        color: '#F0F0F0'
      }
    },
    triggerEvent: true,
    axisLabel: { // 控制轴标签样式
      show: true,
      interval: 0,
      color: '#8C8C8C',
      formatter: function(value) {
        return value.length > 4 ? value.slice(0, 4) + '...' : value; // 当标签长度超过8时，显示前5个字符，后面加省略号
        // let ret = "";//拼接加\n返回的类目项  
        // const maxLength = 4;//每项显示文字个数  
        // const valLength = value.length;//X轴类目项的文字个数  
        // const rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
        // if (rowN > 1 && rowN < 3) {  
        //   for (let i = 0; i < rowN; i++) {  
        //       let temp = "";//每次截取的字符串  
        //       const start = i * maxLength;//开始截取的位置  
        //       const end = start + maxLength;//结束截取的位置  
        //       //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
        //       temp = value.substring(start, end) + "\n";  
        //       ret += temp; //凭借最终的字符串  
        //   }  
        //   return ret;  
        // } else if (rowN >= 3) {
        //   for (let i = 0; i < 2; i++) {
        //     let temp = "";//每次截取的字符串  
        //     const start = i * maxLength;//开始截取的位置  
        //     const end = start + maxLength;//结束截取的位置  
        //     //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
        //     temp = value.substring(start, end) + (i === 1 ? '...' : "\n");  
        //     ret += temp; //凭借最终的字符串
        //   }
        //   return ret
        // } else {  
        //     return value;  
        // }
      }
    }
  },
  yAxis: {
    type: 'value',
    splitLine:{
      show:true,
    },
    axisLabel: {
      show: true,
      color: '#8C8C8C',
      formatter: function(value) {
        if (value >= 1000 && value < 10000) {
          return (value / 1000).toFixed(1) + ' 千'
        } else if (value >= 10000 && value < 1000000) {
          return (value / 10000).toFixed(1) + ' 万'
        } else if (value >= 1000000) {
          return (value / 1000000).toFixed(1) + ' 百万'
        } else {
          return value + ''
        }
      }
    }
  },
  series: [
    {
      data: [],
      name: '',
      type: 'bar',
      label: {
        show: true
      }
    }
  ]
}
export const bar2Options: EChartsOption = {
  title: {
    text: '数据集任务项',
    left: 'center',
    top: 'bottom'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: 80,
    right: 40,
    bottom: 60,
  },
  dataZoom: [{ // 初始不显示dataZoom
    id: 'dataZoomX',  
    show: false,
    type: 'slider',
    orient: 'vertical',
    showDetail: false,
    start: 0,
    // end: 100 - (100 / xdata.length) * dataZoomNum,
    end: 100,
    height: '80%',
    width: 10,
    right: 0,
    top: 0
  }],
  axisTick: {
    alignWithLabel: true
  },
  color: ['#168FFF'],
  yAxis: {
    type: 'category',
    data: [],
    axisTick: {
      alignWithLabel: true
    },
    axisLine: {
      lineStyle: {
        color: '#F0F0F0'
      }
    },
    triggerEvent: true,
    axisLabel: { // 控制轴标签样式
      color: '#8C8C8C',      
      interval: 0,
      // align: "left",
	    // margin: 80,
      formatter: function(value) {
        return value.length > 4 ? value.slice(0, 5) + '...' : value; // 当标签长度超过8时，显示前5个字符，后面加省略号
        // let ret = "";//拼接加\n返回的类目项  
        // const maxLength = 4;//每项显示文字个数  
        // const valLength = value.length;//X轴类目项的文字个数  
        // const rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
        // if (rowN > 1 && rowN < 3) {  
        //   for (let i = 0; i < rowN; i++) {  
        //       let temp = "";//每次截取的字符串  
        //       const start = i * maxLength;//开始截取的位置  
        //       const end = start + maxLength;//结束截取的位置  
        //       //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
        //       temp = value.substring(start, end) + "\n";  
        //       ret += temp; //凭借最终的字符串  
        //   }  
        //   return ret;  
        // } else if (rowN >= 3) {
        //   for (let i = 0; i < 2; i++) {
        //     let temp = "";//每次截取的字符串  
        //     const start = i * maxLength;//开始截取的位置  
        //     const end = start + maxLength;//结束截取的位置  
        //     //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
        //     temp = value.substring(start, end) + (i === 1 ? '...' : "\n");  
        //     ret += temp; //凭借最终的字符串
        //   }
        //   return ret
        // } else {  
        //     return value;  
        // }
      }
    }
  },
  xAxis: {
    type: 'value',
    axisLabel: {
      show: true,
      color: '#8C8C8C',
      formatter: function(value) {
        if (value >= 1000 && value < 10000) {
          return (value / 1000).toFixed(1) + ' 千'
        } else if (value >= 10000 && value < 1000000) {
          return (value / 10000).toFixed(1) + ' 万'
        } else if (value >= 1000000) {
          return (value / 1000000).toFixed(1) + ' 百万'
        } else {
          return value + ''
        }
      }
    }
  },
  series: [
    {
      data: [],
      name: '',
      type: 'bar',
    }
  ]
}

export const lineOptions: EChartsOption = {
  legend: {
    bottom: '0',
    // right: '0',
    icon: 'rect',
    itemWidth: 12,
    itemHeight: 8,
    textStyle: {
      fontSize: 14,
      lineHeight: 14,
      color: '#BFBFBF',
      rich: {
          a: {
             verticalAlign: 'middle',
          },
      },
      padding:[0,0,0,0],  //[上、右、下、左]
    }
    // data: ['综合得分', '规则得分', '人工得分', '模型得分']
  },
  tooltip: {
    trigger: 'axis',
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: 40,
    containLabel: true
  },
  xAxis: {
    type: 'category',
    // boundaryGap: false,
    splitLine:{
      show: false,
      lineStyle:{
          width: 1,
          color: '#BFBFBF'
      },
    },
    axisLine: {
      lineStyle: {
        color: '#BFBFBF'
      }
    },
    data: []
    // data: ['输电模型', '阿里模型', '百度模型', 'XX模型', 'XX模型']
  },
  yAxis: {
    type: 'value',   
    axisLabel: {
      color: '#8C8C8C'
    },   
    splitLine:{
      show:true,
      lineStyle:{
          width: 1,
          color: '#BFBFBF'
      },
    }
  },
  series: []
}

export const radarOptions: EChartsOption = {
  legend: {
    show: false,
    bottom: '0',
    icon: 'circle',
    itemWidth: 8,
    textStyle: {
      fontSize: 14,
      lineHeight: 14,
      rich: {
          a: {
             verticalAlign: 'middle',
          },
      },
      padding:[0,0,-2,0],  //[上、右、下、左]
    }
  },
  tooltip: {
    confine: true
  },
  radar: {
    // shape: 'circle',
    splitArea: {
      show: false,
    },
    // 去掉维度线颜色
    axisLine: {
      show: true,
      lineStyle: {
        color: '#D9D9D9'
      }
    },
    splitLine:{
      show:true,
      lineStyle:{
        color: '#D9D9D9'
      }
    },
    indicator: [],
    radius: '65%',
    // center: ['50%', '60%'],
    name: {
      textStyle: {
          "color": "8c8c8c"
      }
    }
  },
  series: [
    {
      // name: `xxx${t('workplace.index')}`,
      type: 'radar',
      symbol: 'circle',
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1
      },
      data: []
    }
  ]
}

